<template>
  <div>
      <div class="title">
          修改密码
      </div>
     
    <div class="from-item">
      <el-form :model="form" label-width="96px">
    <el-form-item label="旧密码 : ">
      <el-input class="from-input" show-password v-model="form.old" placeholder="请输入旧密码"></el-input>
    </el-form-item>
    <el-form-item label="新密码 : ">
      <el-input class="from-input" show-password v-model="form.new" placeholder="请输入新密码"></el-input>
    </el-form-item>
    <el-form-item label="重复新密码 : ">
      <el-input class="from-input" show-password v-model="form.new2" placeholder="请重复输入新密码"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button class="fromColse" @click="cancel">取消</el-button>
      <el-button class="fromPay" type="primary" @click="save">保存</el-button>
    </el-form-item>
  </el-form>
    </div>


  </div>
</template>

<script>

import { mapState } from 'vuex';

  export default {
      name:"Suppliercipher",
      data () {
          return {
              form: {
                token: "",
                old: '',
                new: '',
                new2: ''
    }
          }
      },
      computed: {
      ...mapState([
        "userInfo",
      ]),
  },
      methods:{
          cancel() {
    console.log('触发取消操作');
    // 可以添加重置表单等逻辑
       this.form = {
                token:"",
                old: '',
                new: '',
                new2: ''
       }

  },
  save() {
    if (this.form.new === this.form.new2) {
      console.log('新密码和重复新密码一致，可进行保存操作');
      // 这里添加将密码数据发送到后端进行保存的逻辑
     this.form.token = this.userInfo.token

      this.$httpApi("/api/savePwd", {
          ...this.form,
      }, "post").then(res =>{
          if(res.code == 200){
            this.$store.dispatch("getUserloginedInfo");
            alertSucc(res.msg);
          }else{
              alertErr(res.msg);
          }
      })


    } else {
      console.log('新密码和重复新密码不一致');
      alertErr('新密码和重复新密码不一致');
    }
  }
      }
  }
</script>

<style lang="less" scoped>
.fromPay{
  width: 133px;
height: 40px;
background: #0052D9;
border-radius: 4px 4px 4px 4px;
border: 1px solid rgba(0,0,0,0);

font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: 400;
font-size: 14px;
color: #FFFFFF;

text-align: center;
font-style: normal;
text-transform: none;
}
.fromColse{
  width: 133px;
height: 40px;
background: #F5F5F5;
border-radius: 4px 4px 4px 4px;
border: 1px solid #D7D7D7;

font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: 400;
font-size: 14px;
color: #666666;

text-align: center;
font-style: normal;
text-transform: none;
}

/deep/ .el-input__inner{
background: #FAFAFA !important;
border-radius: 4px 4px 4px 4px;

}
.from-item{
  width: 696px;
  margin: auto;
  margin-top: 72px;
}


.title{
height: 56px;
background: #FFFFFF;
line-height: 56px;
border-radius: 0px 0px 0px 0px;
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: bold;
font-size: 16px;
color: #333333;
font-style: normal;
text-transform: none;
border-bottom: 4px solid #F5F5F5;
padding-left: 32px;
}
</style>